<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2023-06-06 15:49:57
 * @LastEditTime: 2023-06-06 23:00:06
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 字段设置面板
 * @FilePath: \vue3-element-plus-web\src\views\SysManage\GenderCode\components\Drawer\settingsComponents\FieldSetAside.vue
 * Copyright 版权声明
-->
<template>
  <div class="aside">
      <div class="header">
        <h3 class="title">
          设置面版区
        </h3>
      </div>
      <div class="content">
        <el-form
          :rules="rules"
          ref="dataForm"
          :model="genderCodeModuleInfo.column[genderCodeSettingColumnIndex]"
          label-width="100px"
          style='width:100%;'
        >
          <el-form-item label="在列表中：" prop="show">
            <el-radio-group v-model="genderCodeModuleInfo.column[genderCodeSettingColumnIndex].show">
              <el-radio :label="true">展示</el-radio>
              <el-radio :label="false">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="中文名称：" prop="label">
            <el-input v-model="genderCodeModuleInfo.column[genderCodeSettingColumnIndex].label" />
          </el-form-item>
          <el-form-item label="英文名称：" prop="prop">
            <el-input v-model="genderCodeModuleInfo.column[genderCodeSettingColumnIndex].prop" />
          </el-form-item>
          <el-form-item label="宽度：" prop="width">
            <el-input v-model="genderCodeModuleInfo.column[genderCodeSettingColumnIndex].width" placeholder="列表中宽度，单位px" />
          </el-form-item>
          <el-form-item label="最小宽度：" prop="minWidth">
            <el-input v-model="genderCodeModuleInfo.column[genderCodeSettingColumnIndex].minWidth" placeholder="列表中最小宽度，单位px" />
          </el-form-item>
          <el-form-item label="水平位置：" prop="align">
            <el-radio-group v-model="genderCodeModuleInfo.column[genderCodeSettingColumnIndex].align">
              <el-radio label="left">居左</el-radio>
              <el-radio label="center">居中</el-radio>
              <el-radio label="right">居右</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="为搜索条件：" prop="search">
            <el-radio-group v-model="genderCodeModuleInfo.column[genderCodeSettingColumnIndex].search">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="搜索框类型：" prop="searchType" v-if="genderCodeModuleInfo.column[genderCodeSettingColumnIndex].search === true">
            <el-select v-model="genderCodeModuleInfo.column[genderCodeSettingColumnIndex].searchType" placeholder="请选择">
              <el-option
                v-for="item in searchTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="字典列表：" prop="dictData">

          </el-form-item> -->
        </el-form>
      </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'FieldSetAside',
  computed: {
    ...mapGetters([
      // 选择的表集合
      'genderCodeTableRowSet',
      // 模块配置信息
      'genderCodeModuleInfo',
      // 当前正在配置的字段的下标， 对应 moduleInfo.column[settingColumnIndex]
      'genderCodeSettingColumnIndex'
    ])
  },
  components: {
  },
  data() {
    return {
      rules: {
      },
      // 搜索框类型 枚举
      searchTypeList: [
        {
          value: 'text',
          label: 'Input 输入框'
        },
        {
          value: 'select',
          label: 'Select 选择器'
        },
        {
          value: 'selectMultiple',
          label: 'Select 多选'
        },
        {
          value: 'checkbox',
          label: 'Checkbox 多选框'
        },
        {
          value: 'radio',
          label: 'Radio 单选框'
        },
        {
          value: 'date',
          label: 'DatePicker 日期选择器'
        },
        {
          value: 'daterange',
          label: 'DatePicker 日期区间选择器'
        },
        {
          value: 'datetime',
          label: 'DateTimePicker 日期时间选择器'
        },
        {
          value: 'cascader',
          label: 'Cascader 级联选择器'
        }
      ]
    }
  },
  watch: {
    // 选择的表集合
    genderCodeTableRowSet: {
      handler: function(val, oldVal) {
      },
      deep: true
    },
    // 模块配置信息
    genderCodeModuleInfo: {
      handler: function(val, oldVal) {
        console.log(`🚀 ~ file: FieldSetAside.vue:89 ~ val:`, val)
      },
      deep: true
    },
    // 当前正在配置的字段的下标， 对应 moduleInfo.column[settingColumnIndex]
    genderCodeSettingColumnIndex: {
      handler: function(val, oldVal) {
        console.log(`🚀 ~ file: FieldSetAside.vue:77 ~ val:`, val)
      },
      deep: true
    }
  },
  created() {

  },
  mounted() {

  },
  methods: {
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
<style rel="stylesheet/scss" lang='scss' scoped>
.aside{
    width: 500px;
    margin-left: 15px;
    border: 1px solid #dcdfe6;
    .header{
      line-height: 39px;
      padding: 0 10px;
      border-bottom: 1px solid #dcdfe6;
      .title{
        margin: 0;
        font-size: 16px;
      }
    }
    .content{
      padding: 10px;
    }
  }
</style>
